<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/echarts.min.js"></script>
  <style>
    .box {
      width: 600px;
      height: 400px;
      border: 1px solid #333;
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>
<script>
  let myChart = echarts.init(document.querySelector(".box"))
  let option = {

    xAxis: {},
    yAxis: {},
    legend:{},
    series: [
      {
        type: "scatter",
        symbolSize: 30,
        color: {
          type: "linear",
          x: 0, y: 0, x1: 1, y1: 1,
          colorStops: [
            { offset: 0, color: "red" },
            { offset: 1, color: "green" }
          ]
        },
        data: [
          { name: "张三", value: [1, 1] },
          { name: "张三", value: [1, 2] },
          { name: "张三", value: [1, 1.4] },
          { name: "李四", value: [1.4, 1.2] },
          { name: "李四", value: [0.8, 1.5] },
          { name: "李四", value: [4.2, 1] },
          { name: "王五", value: [2.6, 3] },

        ],
        emphasis: {
          disabled: false,
          scale: true,
          label: {
            show: true,
            formatter: "{c}",
            position:"top",
            color:"red"
          },
          itemStyle:{
            borderColor:"#ffff00",
            borderWidth:20
          },
          focus:"self"
        
          

        }

      }
    ]
  }
  myChart.setOption(option)
</script>

</html>